<template>
  <h3>{{ pForm.title }}</h3>
  <div id="section" class="flex">
    <div>
      <bDetail v-if="pForm.show" :instance="pForm" :mini="true" cover="100%" title="基本信息">
        <div class="edit">
          <div class="textbutton" v-if="but.has('public:account:update')" @click="pForm.show = false">
            {{ but.get("public:account:update") }}
          </div>
        </div>
      </bDetail>
      <bForm v-else :instance="pForm" title="基础表单" cover="100%">
        <div class="blank"></div>
        <el-button @click="() => pForm.updateData(true)" type="primary">完成</el-button>
        <el-button @click="onCancal">取消</el-button>
      </bForm>
    </div>
    <div></div>
  </div>
  <bCropper v-model:img="tempImg"></bCropper>
</template>

<script lang="ts" setup>
import bForm from "@/components/public/b_form.vue";
import bDetail from "@/components/public/b_detail.vue";
import bCropper from "@/components/User/b_cropper.vue";
import { ref, watch } from "vue";
import { UserSelfForm } from "@b/index/account";
import { pagebuttonStore } from "@b/store";
import { ElButton } from "element-plus";

const pForm = new UserSelfForm();
pForm.show = true
const tempImg = ref("");
const but = pagebuttonStore().button;

pForm.init()
//防止报错而已
pForm.id = 1;
pForm.setData();
pForm.showCroppe = (url: string) => {
  tempImg.value = url;
};
watch(tempImg, (url) => {
  pForm.data.headImg = url;
});
const onCancal = async () => {
  const res = await pForm.setData();
  if (res) {
    pForm.show = true;
  }
};
</script>

<style scoped>
.edit {
  position: absolute;
  top: 20px;
  right: 20px;
}

.flex {
  display: flex;
}

.flex> :first-child {
  min-width: 300px;
  width: 400px;
}

.flex .link {
  min-width: 200px;
  max-width: 500px;
  padding: 20px;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  max-height: 500px;
  flex-grow: 1;
}

.flex .table {
  background-color: var(--el-bg-color);
  padding: 20px;
  max-height: 500px;
}

.flex .link .item {
  border-bottom: 1px solid var(--el-border-color);
  padding: 6px;
  display: flex;
  justify-content: space-between;
}

.link .item:last-child {
  border-bottom: none;
}

.flex> :last-child {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  margin: 10px 0;
}

.dialog :deep(.el-overlay) .el-dialog {
  min-width: 300px;
}
</style>